import dayjs from "dayjs";
import { message } from "@/utils/message";
// import { getUserList } from "@/api/system";
import { ElMessageBox, ElMessage } from "element-plus";
import { type PaginationProps } from "@pureadmin/table";
import {
  reactive,
  ref,
  computed,
  onMounted,
  shallowRef,
  onBeforeUnmount
} from "vue";

export function createflowHook() {
  const form = reactive({
    username: "",
    mobile: "",
    status: ""
  });
  const eventform = reactive({});
  const loading = ref(true);

  // 富文本
  const mode = "simple";
  // 编辑器实例，必须用 shallowRef
  const editorRef = shallowRef();

  // 内容 HTML
  const valueHtml = ref("<p>hello</p>");
  const fileList = ref([
    {
      name: "element-plus-logo.svg",
      url: "https://element-plus.org/images/element-plus-logo.svg"
    },
    {
      name: "element-plus-logo2.svg",
      url: "https://element-plus.org/images/element-plus-logo.svg"
    }
  ]);

  const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
    console.log(file, uploadFiles);
  };

  const handlePreview: UploadProps["onPreview"] = uploadFile => {
    console.log(uploadFile);
  };

  const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
    ElMessage.warning(
      `The limit is 3, you selected ${
        files.length
      } files this time, add up to ${files.length + uploadFiles.length} totally`
    );
  };

  const beforeRemove: UploadProps["beforeRemove"] = (
    uploadFile,
    uploadFiles
  ) => {
    return ElMessageBox.confirm(
      `Cancel the transfer of ${uploadFile.name} ?`
    ).then(
      () => true,
      () => false
    );
  };

  // 模拟 ajax 异步获取内容
  onMounted(() => {
    setTimeout(() => {
      valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
    }, 1500);
  });

  const toolbarConfig: any = {
    toolbarKeys: [
      "fontFamily",
      "fontSize",
      "lineHeight",
      "bold", // 粗体
      "underline", // 下划线
      "italic", // 斜体
      "justifyLeft", // 左对齐
      "justifyRight", // 右对齐
      "justifyCenter", // 居中对齐
      "color", // 字体颜色
      "bgColor", // 背景色
      "uploadImage", // 上传图片
      "insertLink", // 插入链接
      "insertTable", // 插入表格
      "divider" // 分割线
    ]
  };
  const editorConfig = { placeholder: "请输入内容..." };

  // 组件销毁时，也及时销毁编辑器
  onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;
    editor.destroy();
  });

  const handleCreated = editor => {
    editorRef.value = editor; // 记录 editor 实例，重要！
  };

  return {
    form,
    editorRef,
    toolbarConfig,
    mode,
    valueHtml,
    editorConfig,
    handleCreated,
    fileList,
    handlePreview,
    handleRemove,
    handleExceed,
    beforeRemove
  };
}
